<template>
  <el-card class="secondhand-list-container">
    <!-- 搜索和筛选区域 -->
    <el-card class="search-card" shadow="never">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input
              v-model="searchForm.name"
              clearable
              placeholder="搜索商品名称"
              style="width: 200px"
              @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon>
                <Search/>
              </el-icon>
            </template>
          </el-input>
        </el-col>
        <el-col :span="3">
          <el-select v-model="searchForm.sortBy" clearable placeholder="排序方式">
            <el-option label="价格排序" value="price"/>
            <el-option label="发布时间" value="createTime"/>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select v-model="searchForm.sortOrder" placeholder="排序顺序">
            <el-option label="降序" value="desc"/>
            <el-option label="升序" value="asc"/>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-checkbox-group v-model="searchForm.statusList">
            <el-checkbox :label="1">在售</el-checkbox>
            <el-checkbox :label="2">已售</el-checkbox>
          </el-checkbox-group>
        </el-col>
        <el-col :span="6">
          <el-button :loading="loading" type="primary" @click="handleSearch">
            <el-icon>
              <Search/>
            </el-icon>
            搜索
          </el-button>
          <el-button @click="handleReset">
            <el-icon>
              <Refresh/>
            </el-icon>
            重置
          </el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 分类导航 -->
    <el-card class="category-card" shadow="never" style="margin-top: 20px">
      <el-row>
        <el-col :span="24">
          <el-radio-group v-model="searchForm.categoryId" @change="handleSearch">
            <el-radio-button :value="0">全部分类</el-radio-button>
            <el-radio-button
                v-for="category in categoryList"
                :key="category.id"
                :value="category.id"
            >
              {{ category.name }}
            </el-radio-button>
          </el-radio-group>
        </el-col>
      </el-row>
    </el-card>

    <!-- 商品列表 -->
    <div style="margin-top: 20px">
      <el-row v-loading="loading" :gutter="20">
        <el-col v-for="product in productList" :key="product.id" :span="6">
          <ProductCard :product="product"/>
        </el-col>
      </el-row>

      <!-- 空状态 -->
      <el-empty v-if="!loading && productList.length === 0" description="暂无商品数据"/>
    </div>

    <!-- 分页 -->
    <el-row justify="center" style="margin-top: 30px">
      <el-pagination
          v-model:current-page="pageInfo.current"
          v-model:page-size="pageInfo.size"
          :page-sizes="[8, 12, 24, 36, 48]"
          :total="pageInfo.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-row>
  </el-card>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import {Refresh, Search} from '@element-plus/icons-vue'
import request from '@/utils/request'
import ProductCard from '@/components/ProductCard.vue'

// 响应式数据
const loading = ref(false)
const productList = ref([])
const categoryList = ref([])

// 搜索表单
const searchForm = reactive({
  name: '',
  categoryId: 0,
  sortBy: 'createTime',
  sortOrder: 'desc',
  statusList: [1]
})

// 分页信息
const pageInfo = reactive({
  current: 1,
  size: 8,
  total: 0
})

// 获取商品列表
const handleGetProductList = async () => {
  loading.value = true

  const param = {}
  // param.publishedByMe = false
  if (searchForm.name) {
    param.name = searchForm.name
  }
  if (searchForm.categoryId) {
    param.categoryId = searchForm.categoryId
  }
  if (searchForm.statusList.length > 0) {
    param.statusList = searchForm.statusList
  }

  const orders = []
  if (searchForm.sortBy) {
    orders.push({
      column: searchForm.sortBy,
      asc: searchForm.sortOrder === 'asc'
    })
  }

  const requestData = {
    page: pageInfo.current,
    size: pageInfo.size,
    param,
    orders
  }

  const data = await request.post('/secondhandGoods/page', requestData)
  productList.value = data.records
  pageInfo.total = data.total
  loading.value = false
}

// 搜索
const handleSearch = () => {
  pageInfo.current = 1
  handleGetProductList()
}

// 重置
const handleReset = () => {
  searchForm.name = ''
  searchForm.categoryId = 0
  searchForm.sortBy = 'createTime'
  searchForm.sortOrder = 'desc'
  searchForm.statusList = [1]
  pageInfo.current = 1
  handleGetProductList()
}

// 分页大小改变
const handleSizeChange = (size) => {
  pageInfo.size = size
  pageInfo.current = 1
  handleGetProductList()
}

// 当前页改变
const handleCurrentChange = (current) => {
  pageInfo.current = current
  handleGetProductList()
}

// 初始化
onMounted(async () => {
  categoryList.value = await request.get('/secondhandCategory/list')
  await handleGetProductList()
})
</script>

<style scoped>
.secondhand-list-container {
  padding: 20px;
}

.search-card, .category-card {
  border-radius: 8px;
}

.search-card :deep(.el-card__body) {
  padding: 20px;
}

.category-card :deep(.el-card__body) {
  padding: 15px 20px;
}
</style> 